<template>
  <!-- <a-skeleton
    active
    :loading="true"
    :paragraph="{ rows: 4 }"
    :avatar="{ size: 'large', shape: 'square' }"
  > -->
    <div
      class="card-img img-percent"
      @mouseenter="playbtn"
      @mouseleave="playbtn"
    >
      <img
        :data-detailId="itemId"
        class="img-border img-percent"
        v-lazy="cardImg"
      >
      <!-- 播放量 -->
      <div v-if="playCount" class="play-amount">
        <a-icon type="caret-right" />
        <span>
          {{ playCounts }}
        </span>
      </div>
      <!-- 鼠标移入显示播放按钮 -->
      <div v-show="show" class="play-btn pointer">
        <a-icon class="font-20" type="caret-right" />
      </div>
    </div>
  <!-- </a-skeleton> -->
</template>

<script>
import { changeBigCount } from '@/utils/figure';
// import { Skeleton } from 'ant-design-vue'

export default {
  name: 'cardItem',

  components: {
    // ASkeleton: Skeleton
  },

  data() {
    return {
      show: false
    }
  },

  props: {
    cardImg: {
      type: String,
      default: ''
    },
    playCount: {
      type: Number,
      default: undefined
    },
    itemId: {
      type: Number,
      default: undefined
    }
  },

  computed: {
    playCounts() {
      if (this.playCount) {
        return changeBigCount(this.playCount);
      }
      return 0;
    }
  },
  
  methods: {
    playbtn() {
      if (this.playCounts) {
        this.show = !this.show;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card-img {
  position: relative;
  margin-bottom: 5px;
  img {
    border: 1px solid #e6e6ee;
  }
  .play-amount {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    span {
      text-shadow: 0 0 3px #2c3e50;
    }
  }
  .play-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: #fbf7f6;
    color: #ec4141;
    border-radius: 50%;
    // transition: all .5;
  }
}
</style>